<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小球动画</title>
  <script src="./antvx6.js"></script>
  <script src="./layout.min.js"></script>
</head>

<body>
  <a href="https://codesandbox.io/s/lucid-river-8xldj2?file=/src/app.tsx">示例地址</a>
  <div id="container"></div>
  <script>
    window.onload = function () {
      const graph = new X6.Graph({
        container: document.getElementById('container'),
        width: 800,
        height: 600,
      });
      const Vector = X6.Vector;
      console.log(`15-小球动画.html 23 [Vector]`, Vector);

      const a = graph.addNode({
        x: 50,
        y: 50,
        width: 100,
        height: 40,
        label: 'A',
      })

      const b = graph.addNode({
        x: 250,
        y: 50,
        width: 100,
        height: 40,
        label: 'B',
      })

      const c = graph.addNode({
        x: 350,
        y: 150,
        width: 100,
        height: 40,
        label: 'C',
      })

      const d = graph.addNode({
        x: 80,
        y: 240,
        width: 100,
        height: 40,
        label: 'D',
      })

      graph.addEdge({
        source: a,
        target: b,
      })

      graph.addEdge({
        source: b,
        target: c,
      })

      graph.addEdge({
        source: b,
        target: d,
        connector: 'smooth',
        attrs: {
          line: {
            strokeDasharray: '5 5',
          },
        },
      })

      function flash(cell) {
        const cellView = graph.findViewByCell(cell)
        if (cellView) {
          cellView.highlight()
          setTimeout(() => cellView.unhighlight(), 300)
        }
      }

      graph.on('signal', (cell) => {
        if (cell.isEdge()) {
          console.log(87, graph.findViewByCell);
          const view = graph.findViewByCell(cell);
          console.log(88, view);
          console.log(89, view.sendToken);
          if (view) {
            const token = Vector.create('circle', { r: 6, fill: '#feb662' })
            const target = cell.getTargetCell()
            setTimeout(() => {
              view.sendToken(token.node, 1000, () => {
                if (target) {
                  graph.trigger('signal', target);
                }
              })
            }, 300)
          }
        } else {
          flash(cell)
          const edges = graph.model.getConnectedEdges(cell, {
            outgoing: true,
          })
          edges.forEach((edge) => graph.trigger('signal', edge))
        }
      })


      let manual = false

      graph.on('node:mousedown', ({ cell }) => {
        manual = true
        graph.trigger('signal', cell)
      })

      const trigger = () => {
        graph.trigger('signal', a)
        if (!manual) {
          setTimeout(trigger, 3000)
        }
      }

      trigger()
    };
  </script>
</body>

</html>